<template>
  <div id="demoRight" style="height: 100%; border: cyan;">
    <div class="dl_r_bg dl_common">
      <div class="dl_top"></div>
      <div class="dl_flex flex-row align-items">
        <img src="../assets/logo.png" class="dl_img" />
        <div>
          集团党员数据概览
          <br />sdashfjhdfjdshfkdf <br />数据为参考数据，无实际意义
        </div>
      </div>
      <div class="dl_divider"></div>
      <div>
        集团党员 1124人
      </div>
      <div class="dl_divider"></div>
      <div class="dl_flex flex-row align-items">
        <dv-scroll-ranking-board
          :config="config"
          style="width:100%;height:200px;color: rgb(194, 201, 159);"
        />
      </div>
      <div class="dl_divider"></div>
      <div>
        新发展党员数量
      </div>
      <div
        style="display: flex; align-items: center; justify-content: space-between;"
      >
        <dv-active-ring-chart
          :config="config"
          style="width:33%;height:120px; "
        />
        <dv-active-ring-chart
          :config="config"
          style="width:33%;height:120px; "
        />
        <dv-active-ring-chart
          :config="config"
          style="width:33%;height:120px; "
        />
      </div>
      <div>
        党员活动
      </div>
      <div>
        <video width="320" height="200" controls>
          <source src="movie.mp4" type="video/mp4" />
          <source src="movie.ogg" type="video/ogg" />
          您的浏览器不支持Video标签。
        </video>
      </div>
    </div>
  </div>
</template>

<script>
// import LineEchart from "@/components/echart/lineEchart/index.vue";
// // import EchartsComponentsVue from "../components/echart/echarts/EchartsComponents.vue";
export default {
  name: "BigScreenVueDatavDemoleft",

  data() {
    return {
      config: {
        data: [
          {
            name: "周口",
            value: 55,
          },
          {
            name: "南阳",
            value: 120,
          },
          {
            name: "西峡",
            value: 78,
          },
          {
            name: "驻马店",
            value: 66,
          },
          {
            name: "新乡",
            value: 80,
          },
        ],
        lineWidth: 5,
        digitalFlopStyle: {
          fontSize: 10,
          fill: "#fff",
        },
      },
      scorllData: {
        data: [
          ["行1列1", "行1列2", "行1列3"],
          ["行2列1", "行2列2", "行2列3"],
          ["行3列1", "行3列2", "行3列3"],
          ["行4列1", "行4列2", "行4列3"],
          ["行5列1", "行5列2", "行5列3"],
          ["行6列1", "行6列2", "行6列3"],
          ["行7列1", "行7列2", "行7列3"],
          ["行8列1", "行8列2", "行8列3"],
          ["行9列1", "行9列2", "行9列3"],
          ["行10列1", "行10列2", "行10列3"],
        ],
        oddRowBGC: "none",
        evenRowBGC: "none",
      },
      optionsObj1: {
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "line",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      },
    };
  },
  components: {
    // LineEchart,
    // EchartsComponentsVue,
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.dl_r_bg {
  opacity: 1;
  width: 100%;
  height: auto;
  border-radius: inherit;
  display: -webkit-flex; /* Safari */
  display: flex;
  box-shadow: -5px 0px 10px #ae0406;
}
.dl_top {
  width: 100%;
  height: 9px;
  background-color: rgb(255, 227, 132);
  opacity: 1;
  border-radius: inherit;
}
.dl_common {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.dl_img {
  width: 40px;
  height: 40px;
  //   color: #fff;
}
.dl_divider {
  height: 1px;
  border-bottom: 2px solid rgb(255, 227, 132);
}
.rows .row-item {
  background: none !important;
}
</style>
